"use clinet";

import { ElementType } from "react";
import "../app/style/selbutton.css";

/**
 * @description: 自定义按钮组件封装
 * @param {buttonProps} buttonProps
 * @param {number} buttonProps.type : 按钮的样式/可能会定义N种不同的按钮组件
 * @param {string} buttonProps.text : 按钮中所带的文字
 * @param {height} buttonProps.height : 按钮所设置的高度，宽度由于有动画所以使用固定150px
 * @param {string} buttonProps.color : 设置按钮的颜色
 * @param {ElementType} buttonProps.Icon : 按钮中的图标，可能会带图标，可能不会
 */
export enum buttonType {
  "leftSlide",
  "rewait",
}

interface buttonProps {
  type: buttonType;
  text: string;
  height: number;
  color: string;
  Icon?: ElementType;
  onClick: () => void;
}

export default function SelButton(props: buttonProps) {
  switch (props.type) {
    case buttonType.leftSlide:
      return (
        <button
          className="leftSlide-button"
          style={{ height: props.height + "px", background: props.color }}
          onClick={props.onClick}
        >
          <span className="leftSlide-text">{props.text}</span>
          <span
            className="leftSlide-icon"
            style={{ height: props.height + "px" }}
          >
            {props.Icon ? <props.Icon></props.Icon> : null}
          </span>
        </button>
      );
    case buttonType.rewait:
      return <button>wait...</button>;
  }
}
